<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
  <meta charset="UTF-8"/>
  <title>尚硅谷会员注册页面</title>
  <link rel="stylesheet" th:href="@{/css/style.css}"/>
  <link rel="stylesheet" th:href="@{/css/register.css}"/>
  <script th:src="@{/script/vue.min.js}"></script>
  <script th:src="@{/script/axios.min.js}"></script>
  <script>
      window.onload = function () {
          new Vue({
              el: "#register_form",
              data: {
                  uname: "",
                  unameMsg: "",
                  pwd: "",
                  pwdMsg: "",
                  pwd2: "",
                  pwd2Msg: "",
                  email: "",
                  yourCode: "",
              },
              methods: {
                  addUser: function () {
                      /*失去焦点即校验用户名格式*/
                      //设置追踪变量来拦截校验格式后axios自动执行
                      let uname_tag = 0;
                      let unameReg = /[0-9a-zA-Z]{4,16}/gim;
                      let uname_flag = unameReg.test(this.uname);
                      if (!uname_flag) {
                          this.unameMsg = "用户名应为4~16位数字和字母组成";
                      } else {
                          this.unameMsg = "";
                          uname_tag = 1;
                      }

                      /*校验密码格式*/
                      let pwd_tag = 0;
                      let pwdReg = /[0-9A-Za-z]{2,16}/gim;
                      let pwd_flag = pwdReg.test(this.pwd);
                      if (!pwd_flag) {
                          this.pwdMsg = "密码应为2~16位数字和字母组成";
                      } else {
                          this.pwdMsg = "";
                          pwd_tag = 1;
                      }

                      /*校验二次密码输入是否一致*/
                      let pwd2_tag = 0;
                      if (this.pwd === this.pwd2) {
                          this.pwd2Msg = "";
                          pwd2_tag = 1;
                      } else {
                          this.pwd2Msg = "密码两次输入不一致";
                      }

                      //当用户名与密码校验格式都通过则进行axios异步请求
                      if (uname_tag == 1 && pwd_tag == 1 && pwd2_tag == 1) {
                          axios({
                              method: "POST",
                              url: "/bookstore/user/add",
                              params: {
                                  uname: this.uname,
                                  pwd: this.pwd,
                                  email: this.email,
                                  yourCode: this.yourCode,
                              }
                          }).then(response => {
                              if (response.data.success) {
                                  window.location.href = "http://localhost:8080/bookstore/user/login";
                              } else {
                                  alert(response.data.message);
                              }
                          }).catch(reason => {
                              console.log(reason.data);
                          });
                      }
                  }
              }
          })
      };
  </script>
  <style>
      .login_form {
          height: 420px;
          margin-top: 25px;
      }
  </style>
</head>
<body>
<div id="login_header">
  <a href="../index.html">
    <img class="logo_img" alt="" th:src="@{/img/logo.gif}"/>
  </a>
</div>

<div class="login_banner">
  <div id="register_form" class="register_form">
    <h1>注册尚硅谷会员</h1>
    <form action="register_success.html">
      <div class="form-item">
        <div>
          <label>用户名称:</label>
          <input type="text" id="uname" name="uname" placeholder="请输入用户名" v-model="uname"/>
        </div>
        <!--<span class="errMess">用户名应为4~16位数字和字母组成</span>-->
        <span class="errMess">{{unameMsg}}</span>
      </div>
      <div class="form-item">
        <div>
          <label>用户密码:</label>
          <input type="password" id="pwd" name="pwd" placeholder="请输入密码" v-model="pwd"/>
        </div>
        <!--<span class="errMess">密码的长度至少为8位</span>-->
        <span class="errMess">{{pwdMsg}}</span>
      </div>
      <div class="form-item">
        <div>
          <label>确认密码:</label>
          <input type="password" id="pwd2" name="pwd2" placeholder="请输入确认密码" v-model="pwd2"/>
        </div>
        <!--<span class="errMess">密码两次输入不一致</span>-->
        <span class="errMess">{{pwd2Msg}}</span>
      </div>
      <div class="form-item">
        <div>
          <label>用户邮箱:</label>
          <input type="text" id="email" name="email" placeholder="请输入邮箱" v-model="email"/>
        </div>
        <!--<span class="errMess">请输入正确的邮箱格式</span>-->
      </div>
      <div class="form-item">
        <div>
          <label>验证码:</label>
          <div class="verify">
            <input type="text" id="yourCode" name="yourCode" placeholder="" v-model="yourCode"/>
            <!--<img th:src="@{/img/code.bmp}" alt=""/>-->
            <img th:src="@{/img}" alt="" style="width: 110px;height: 42px"/>
          </div>
        </div>
        <!--<span class="errMess">请输入正确的验证码</span>-->
      </div>
      <button type="button" class="btn" @click="addUser">注册</button>
    </form>
  </div>
</div>
<div id="bottom">
  <span>
    尚硅谷书城.Copyright &copy;2023
  </span>
</div>
</body>
</html>
